<template>
    <div class="page details">
        <header class="header">
            <i class="iconfont icon-fanhui" @click="$router.back()"></i>
            <p>网易严选</p>
            <i class="iconfont icon-fangdajing"></i>
            <i class="iconfont icon-gouwuche"></i>
        </header>
        <!-- 轮播图1 -->
        <div class="swiper rotograph">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in this.swiper" :key="index">
                    <img class="swiper-img" :src="item" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
        </div>
        <!-- 特价 -->
        <div class="special-price">
            <p>{{ this.alldata.promotionDesc }}</p>
            <!-- 现价 -->
            <div class="current-price">
                <span>￥</span>
                <span>{{ this.obj.basicPrice }}</span>
            </div>
            <!-- 原价 -->
            <div class="original-price">
                <span>￥</span>
                <span>{{ this.obj.finalPrice ? this.obj.finalPrice.price : this.alldata.counterPrice }}</span>
            </div>
        </div>
        <!--  -->
        <div class="m-detailBaseInfo">
            <!-- 会员 -->
            <div class="spmc-banner" v-show="this.alldata.spmcBanner">
                <div class="spmcPrice">
                    <img src="https://yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png" alt="">
                    <span>{{ this.alldata.spmcBanner ? this.alldata.spmcBanner.spmcDesc : '' }}</span>
                    <span>￥{{ this.alldata.spmcBanner ? this.alldata.spmcBanner.spmcPrice : '' }}</span>
                    <i class="iconfont icon-tishi"></i>
                </div>
                <p>开通</p>
            </div>
            <!-- 商品信息 -->
            <div class="baseInfo">
                <div class="info">
                    <div class="name">{{ this.alldata.name }}</div>
                    <div class="simpleBrandInfo">
                        <span class="span1" v-show="this.obj.ownType">自营</span>
                        <img :src="this.obj.logoUrl" alt="">
                        <span class="span2">{{ this.obj.title }}</span>
                    </div>
                    <span>推荐理由</span>
                </div>
                <div class="comment" v-show="this.alldata.goodCmtRate">
                    <p>
                        <span> {{ this.alldata.goodCmtRate }}</span>
                        <span>好评率</span>
                    </p>
                    <span>></span>
                </div>

            </div>
            <!-- 推荐理由 -->
            <div class="rcmdBanner">
                <ul>
                    <li v-for="(item, index) in this.alldata.recommendReason" :key="index">
                        {{ item }}
                    </li>
                </ul>
            </div>
        </div>
        <!--  -->
        <div class="information">
            <ul class="ul">
                <!-- 邮费 -->
                <li class="item1 li">
                    {{ this.obj.postage_name }}：{{ this.obj.postage_content }}
                    <i class="iconfont icon-dayuhao"></i>
                </li>
                <!-- 促销 -->
                <!-- <div class="item2">
                    <span>促销：</span>
                    <div>
                        <span class="span1">{{ this.obj.activityType }}</span>
                        <p>
                            <span>{{ this.obj.activity_name }}</span>
                            <span>{{ this.obj.promLimitDesc }}</span>
                        </p>
                    </div>
                    <i class="iconfont icon-dayuhao"></i>
                </div> -->
                <!-- 购物返 -->
                <li class="item3 li" v-show="this.alldata.shoppingReward">
                    {{ this.obj.shoppingReward_name }}：{{ this.obj.rewardDesc }}<span>{{ this.obj.rewardValue }}</span>
                    <i class="iconfont icon-dayuhao"></i>
                </li>
                <!-- 选择商品 -->
                <li class="item4 li" @click="btn">
                    {{ this.value ? '已选择：' + this.value : '请选择规格数量' }}
                    <i class="iconfont icon-dayuhao"></i>
                </li>
                <!-- 地址 -->
                <li class="item5 li">
                    配送：<span style="color: #ccc;">请选择配送地址</span>
                    <i class="iconfont icon-dayuhao"></i>
                </li>
                <!-- 备注 -->
                <li class="item6 li" v-show="this.obj.remarkTitle">
                    {{ this.obj.remarkTitle }}
                    <i class="iconfont icon-dayuhao"></i>
                </li>
                <!-- 服务 -->
                <li class="item7 li">
                    <span>服务：</span>
                    <ul class="item7-ul">
                        <li v-for="(item, index) in this.service" :key="index">
                            {{ item.title }}
                        </li>
                    </ul>
                    <i class="iconfont icon-dayuhao"></i>
                </li>
            </ul>
        </div>
        <!-- 手动隔开--颜色 -->
        <div class="sb"></div>
        <!-- 轮播图2 -->
        <div class="swiper adBanners">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in this.swiper1" :key="index">
                    <img class="swiper1-img" :src="item.picUrl" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
        </div>
        <div class="sb"></div>
        <!-- 评论 -->
        <div class="review" v-show="this.alldata.commentCount">
            <div class="div1 ">
                <p>
                    <span>用户评论({{ this.alldata.commentCount ? this.alldata.commentCount : '' }})</span>
                    <span>好评率</span>
                    <span>{{ this.alldata.commentCount ? this.alldata.goodCmtRate : '' }}</span>
                </p>
                <i class="iconfont icon-dayuhao"></i>
            </div>
            <div class="div2">
                <h2>
                    <img :src="this.obj.frontUserAvatar" alt="">
                    <span>{{ this.alldata.commentCount ? this.alldata.comments[0].frontUserName : '' }}</span>
                </h2>
                <p class="p1"><span>{{ this.alldata.commentCount ? timestampToTime : '' }}</span>{{
                    this.alldata.commentCount ? specification11 : '' }}</p>
                <p class="p2">{{ this.alldata.commentCount ? this.alldata.comments[0].content : '' }}</p>
                <div>
                    <img v-for="(item, index) in  this.alldata.commentCount ? this.alldata.comments[0].picList : ''"
                        :key="index" :src="item" alt="">
                </div>
            </div>
        </div>
        <div class="sb"></div>
        <!-- 网易严选 -->
        <div class="m-brandInfo">
            <div class="left">
                <img :src="this.obj.logo1" alt="">
            </div>
            <div class="right">
                <p>
                    <span>{{ this.obj.brandInfo_title }}</span>
                    <i class="iconfont icon-dayuhao"></i>
                </p>
                <p>{{ this.obj.brandInfo_desc }}</p>
            </div>
        </div>
        <div class="sb"></div>
        <!-- 商品参数 -->
        <div class="arguments">
            <div class="arguments-title">商品参数</div>
            <div class="arguments-list" v-for="(item, index) in this.alldata.attrList" :key="index">
                <p class="arguments-left">{{ item.attrName }}</p>
                <p class="arguments-right">{{ item.attrValue }}</p>
            </div>
        </div>
        <!-- html结构--图片 -->
        <div class="detailHtml" v-html="this.content.detailHtml"></div>
        <!-- 懒得给底部以上标签添加bottom：50px -->
        <div style="height:50px"></div>
        <!-- 底部 -->
        <footer>
            <p><i style="font-size:20px" class="iconfont icon-kefu"></i></p>
            <p>立即购买</p>
            <p>加入购物车</p>
        </footer>
        <!-- 购物车弹窗 -->
        <div class="car-popover" :class="{ 'btn': this.type }">
            <div class="head">
                <span class="x" @click="btn">X</span>
                <img :src="this.currentImage ? this.currentImage : this.obj.commodity_img" alt="">
                <!-- 特价 -->
                <div class="right">
                    <span class="right-title">{{ this.alldata.promotionDesc }}</span>
                    <div class="right-price">
                        <!-- 现价 -->
                        <div class="current-price">
                            <span>价格：￥{{ this.obj.basicPrice }}</span>
                        </div>
                        <!-- 原价 -->
                        <div class="original-price">
                            <span>￥{{ this.obj.finalPrice ? this.obj.finalPrice.price : this.alldata.counterPrice
                            }}</span>
                        </div>
                    </div>
                    <p>已选择:<span>{{ this.value ? this.value : '请选择规格数量' }}</span></p>
                </div>
            </div>
            <p class="size">尺码助手></p>
            <!-- 商品规格 -->
            <div class="div1">
                <div class="u-format" v-for="(item, index) in this.alldata.skuSpecList" :key="index">
                    <p>{{ item.name }}</p>
                    <div class="con">
                        <div v-for="(ite, index1) in item.skuSpecValueList" :key="index1"
                            @click="id(ite.picUrl, ite.id, ite.value)"
                            :class="{ 'color1': border_color && choose_id == ite.id }">
                            {{ ite.value }}</div>
                    </div>
                </div>
            </div>
            <!-- 数量 -->
            <div class="sum">
                <p>数量</p>
                <div class="con">
                    <button @click="reduceAction">-</button>
                    <input type="text" :value="this.amount">
                    <button @click="addAction">+</button>
                </div>
            </div>
        </div>

        <!-- 其它弹窗 -->

    </div>
</template>

<script>
import axios from 'axios'
import Swiper from 'swiper/swiper-bundle.esm.js'
import 'swiper/swiper-bundle.min.css'
import '../assets/css/CartDetails.css'
import '../assets/iconfont/iconfont.css'
// import '../assets/css/base.css'
export default {
    data() {
        return {
            //轮播图1
            swiper: [],

            //轮播图2
            swiper1: [],

            //html结构
            content: {},

            //所有数据
            alldata: [],

            //服务
            service: [],

            obj: {},

            //时间
            time: '',
            //规格
            specification: '',

            //弹窗显示/隐藏
            num: 0,
            type: false,

            //图片切换
            currentImage: '',

            // 选择边框颜色
            border_color: false,
            choose_id: '',
            value: '',

            // 商品数量
            amount: 1
        };
    },
    async created() {
        try {
            const res = await axios.get(`/item/detail.json?csrf_token=488a4e0e372cb731535522b4baf07040&id=${this.$route.params.id}`)
            this.service = res.data.policyList
            this.alldata = res.data.item
            //轮播图+html结构
            this.swiper = res.data.item.itemDetail
            this.swiper1 = res.data.item.adBanners
        } catch (error) {
            console.error(error);
        }
        //html结构
        let { detailHtml } = this.swiper
        this.content = { detailHtml }
        //轮播图
        delete this.swiper.detailHtml
        delete this.swiper.videoInfo

        //现价
        this.obj.basicPrice = this.alldata.price.basicPrice

        //原价
        this.obj.counterPrice = this.alldata.price.counterPrice

        //到手
        this.obj.finalPrice = this.alldata.price.finalPrice

        //自营
        this.obj.ownType = this.alldata.simpleBrandInfo.ownType

        //logo
        this.obj.logoUrl = this.alldata.simpleBrandInfo.logoUrl

        //title
        this.obj.title = this.alldata.simpleBrandInfo.title
        //邮费
        this.obj.postage_name = this.alldata.skuFreight.title
        //邮费内容
        this.obj.postage_content = this.alldata.skuFreight.freightInfo

        //促销
        // this.obj.activityType = this.alldata.hdrkDetailVOList ? this.alldata.hdrkDetailVOList[0].activityType : ''
        // this.obj.activity_name = this.alldata.hdrkDetailVOList ? this.alldata.hdrkDetailVOList[0].name : ''
        // this.obj.promLimitDesc = this.alldata.hdrkDetailVOList ? this.alldata.hdrkDetailVOList[0].promLimitDesc : ''

        // 购物返
        this.obj.shoppingReward_name = this.alldata.shoppingReward ? this.alldata.shoppingReward.name : ''
        this.obj.rewardDesc = this.alldata.shoppingReward ? this.alldata.shoppingReward.rewardDesc : ''
        this.obj.rewardValue = this.alldata.shoppingReward ? this.alldata.shoppingReward.rewardValue : ''

        // 备注
        this.obj.remarkTitle = this.alldata.remark ? this.alldata.remark.remarkTitle : ''

        //时间
        this.time = this.alldata.commentCount ? this.alldata.comments[0].createTime : 0;

        //规格
        this.specification = this.alldata.commentCount ? this.alldata.comments[0].skuInfo[0] : ''

        //logo1
        this.obj.logo1 = this.alldata.brandInfo.picUrl

        //评论的图像
        let obj1 = this.alldata.comments ? this.alldata.comments[0] : ''
        if (obj1) {
            this.obj.frontUserAvatar = obj1.frontUserAvatar ? obj1.frontUserAvatar
                : 'https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png?type=webp&imageView&quality=75&thumbnail=60x60'
        }


        //brandInfo_title
        this.obj.brandInfo_title = this.alldata.brandInfo.title
        console.log(this.obj.brandInfo_title);

        // brandInfo_desc
        this.obj.brandInfo_desc = this.alldata.brandInfo.desc

        //商品默认图片
        this.obj.commodity_img = this.alldata.skuSpecList[0].skuSpecValueList[0].picUrl ? this.alldata.skuSpecList[0].skuSpecValueList[0].picUrl : this.alldata.primaryPicUrl

        //选择边框颜色
        // this.obj.border_color = false
    },
    computed: {
        //时间戳转时间
        timestampToTime() {
            let date = new Date(this.time);
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D + h + m + s;
        },
        //规格-截取
        specification11() {
            let index = this.specification.indexOf(':')
            return this.specification.substring(index + 1)
        },
    },
    mounted() {
        let page = document.querySelector('#container .page');
        page.style.bottom = '0px'
        page.style.display = 'block'
        //轮播图1
        var mySwiper = new Swiper('.rotograph', {
            //切换速度
            speed: 1000,

            //手掌变为掌心
            grabCursor: true,

            loop: true, // 循环模式选项
            autoplay: {
                disableOnInteraction: false,
                delay: 1000,
            },

            // 如果需要分页器
            // pagination: {
            //     el: '.swiper-pagination',
            //     bulletActiveClass: 'my-bullet',
            // },
        })
        //轮播图2
        var mySwiper = new Swiper('.adBanners', {
            //切换速度
            speed: 1000,

            //手掌变为掌心
            grabCursor: true,

            loop: true, // 循环模式选项
            autoplay: {
                disableOnInteraction: false,
                delay: 1000,
            },

            // 如果需要分页器
            // pagination: {
            //     el: '.swiper-pagination',
            //     bulletActiveClass: 'my-bullet',
            // },
        })
    },
    methods: {
        btn() {
            this.num++
            if (this.num % 2 != 0) {
                this.type = true
                return
            }
            this.type = false
        },
        id(index, id, value) {
            this.currentImage = index
            this.value = value
            if (this.choose_id != id) {
                this.choose_id = id
                this.border_color = true
                return
            }
            this.border_color = !this.border_color
        },
        //加
        addAction() {
            this.amount++;
        },
        // 减
        reduceAction() {
            if (this.amount <= 1) {
                alert('不能再少了');
                return;
            }
            this.amount--;
        },
    }
}
</script>

<style scoped>
/*  */
</style>